<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> -->
    <title>Document</title>
    <style>
        ol,
        ul,
        li,
        body {
            padding: 0;
            margin: 0;
        }

        ul,
        ol {
            list-style: none;
        }

        li {
            border: 1px solid #000;
        }

        .container {
            width: 1000px;
            margin: 0 auto;
        }

        .nav {
            width: 100px;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-630px, -50%);
        }

        .nav li {
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            text-align: center;
        }

        .nav li.cur {
            color: red;
        }
    </style>
</head>

<body>
    <ol class="nav">
        <li class="cur">男装</li>
        <li>女装</li>
        <li>童装</li>
        <li>运动</li>
        <li>美妆</li>
    </ol>
    <ul class="container">
        <li>男装</li>
        <li>女装</li>
        <li>童装</li>
        <li>运动</li>
        <li>美妆</li>
    </ul>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <!-- <script src="./js/jquery-3.4.1.js"></script> -->
    <script>
        $(function () {
            var isOnclick = false; // 该变量代表是否点击了左边的li
            var colors = ["#fcf", "#ffc", "#ccc", "#cff", "#f40", "pink"]
            var heights = [1000, 800, 700, 1000, 900];
            $('.nav li').each(function (i, el) {
                $(el).css("background", colors[i])
            });

            $(".container li").each(function (i, el) {
                $(el).css({
                    backgroundColor: colors[i],
                    height: heights[i]
                });
            });

            $(".nav li").on("click", function () {
                isOnclick = true;
                // 点击左边菜单,右边滑动到指定位置
                var i = $(this).index();
                // 获取点击左边,对应右边元素距离页面顶部的距离
                var li_scrollTop = $(".container li").eq(i).offset().top;

                //$("html,body")html和body兼容不同浏览器的写法
                //scrollTop jQuery封装的网页滚动的距离的属性
                $("html,body").stop(true).animate({
                    scrollTop: li_scrollTop
                },function(){
                    isOnclick = false;
                })

                // 处理左边高亮样式
                $(this).addClass("cur").siblings().removeClass("cur")
            })
            console.log( $(window).height());
            
            $(window).scroll(function () {
                // 如果是点击引起的滚动,就不触发下面的代码,否则样式会不好看
                if(isOnclick) return

                //滚动的时候，切换当前样式
                var sT = $(window).scrollTop();

                $(".container li").each(function (i, el) {
                    // 判断当前的sT大于 当前盒子的Y坐标值-窗口高度/2
                    if (sT > ($(el).offset().top - $(window).height() / 2)) {

                        $(".nav li").eq(i).addClass("cur").siblings().removeClass("cur");
                    }
                })

            })
        })
    </script>
</body>

</html>